<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>通用的添加好友页面模板</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>



        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed b-line">
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">添加好友</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-sys"></i>
                </a>
            </header>
            <section class="aui-scrollView">
                <div class="aui-friends-list">
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/icon-tx-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>同步通讯录好友</h2>
                        </div>
                        <div class="aui-flex-arrow"></div>
                    </a>
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/icon-tx-002.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>同步通讯录好友</h2>
                        </div>
                        <div class="aui-flex-arrow"></div>
                    </a>
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/icon-tx-003.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>同步通讯录好友</h2>
                        </div>
                        <div class="aui-flex-arrow"></div>
                    </a>
                </div>
                <div class="aui-friends-head">
                    <h2>你可能感兴趣的人</h2>
                </div>
                <div class="aui-friends-list">
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/user-logo-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>张一鸣</h2>
                            <h3>字节跳动创始人兼CEO</h3>
                        </div>
                        <div class="aui-flex-button">
                            <button><i class="icon icon-add"></i>关注</button>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/user-logo-002.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>刘强东</h2>
                            <h3>京东商城创始人兼CEO</h3>
                        </div>
                        <div class="aui-flex-button">
                            <button><i class="icon icon-add"></i>关注</button>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/user-logo-003.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>陈赫</h2>
                            <h3>演员 艺人</h3>
                        </div>
                        <div class="aui-flex-button">
                            <button><i class="icon icon-add"></i>关注</button>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/user-logo-004.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>李彦宏</h2>
                            <h3>百度创始人兼CEO</h3>
                        </div>
                        <div class="aui-flex-button">
                            <button><i class="icon icon-add"></i>关注</button>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/user-logo-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>张一鸣</h2>
                            <h3>字节跳动创始人兼CEO</h3>
                        </div>
                        <div class="aui-flex-button">
                            <button><i class="icon icon-add"></i>关注</button>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-flex">
                        <div class="aui-flex-img">
                            <img src="images/user-logo-002.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>刘强东</h2>
                            <h3>京东商城创始人兼CEO</h3>
                        </div>
                        <div class="aui-flex-button">
                            <button><i class="icon icon-add"></i>关注</button>
                        </div>
                    </a>
                </div>
            </section>
        </section>

    </body>
</html>
